<template>
  <!-- <div>京东cps分类</div> -->
  <div class="shop">
    <div class="top">
      <el-button size='small'
        type='primary'
        @click="addJDCPSCate">新增分类</el-button>
      <el-button class='search'
        size='small'
        type='primary'
        @click="searchJDCate">搜索</el-button>
      <el-input class="search input"
        size='small'
        v-model="form.cate_id"
        placeholder="输入id查询"
        clearable></el-input>
      <el-input class="search input"
        size='small'
        v-model="form.title"
        placeholder="输入分类名称查询"
        clearable></el-input>
    </div>

    <el-table :data="tableData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label='ID'
        prop='ID'></el-table-column>
      <el-table-column label='分类名称'
        prop='title'></el-table-column>
      <el-table-column label='关联选品库ID'
        prop='relation_ID'></el-table-column>
      <el-table-column label='展示排序'
        prop='order'></el-table-column>
      <el-table-column label='分类状态'>
        <template slot-scope="scope">
          <el-switch :key="scope.row.ID"
            :active-value="1"
            :inactive-value="0"
            :value="scope.row.status"
            @change="isUseActivityChange(scope.row.id,$event)"></el-switch>
          <span v-if="scope.row.status == '1'">已启用</span>
          <span v-else>已禁用</span>
        </template>
      </el-table-column>
      <el-table-column label='操作'
        fixed='right'
        width='340'>
        <template slot-scope="scope">
          <el-button size='mini'
            type='primary'
            @click="watchJDCateDetail(scope.row.ID)">查看</el-button>
          <el-button size='mini'
            @click="gotoSaleDaily(scope.row.ID)">销售日志</el-button>
          <el-button size='mini'
            @click="syncWoods(scope.row.ID)">同步商品</el-button>
          <el-button size='mini'
            @click="deleteJDCPSCate(scope.row.ID)"
            type='primary'>删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>

    <!--新增分类-->
    <jdialog title="新增商品展示分类"
      :visible.sync="isShowAddCategory"
      width="640px">
      <el-form :model='cateForm'
        :rules="rules"
        class="demo-ruleForm"
        label-width="140px">
        <el-form-item label="商品分类名称："
          prop="title">
          <el-input v-model="cateForm.title"
            style='width:180px;'
            size='mini'
            placeholder='请输入商品分类名称'></el-input>
        </el-form-item>
        <el-form-item label='商品分类排序：'
          prop='order'>
          <el-input v-model='cateForm.order'
            style='width:140px;'
            size='mini'
            placeholder='0～99'></el-input>
          <span class="note">数值越大越靠前，数值相同两个品类，系统随机展示</span>
        </el-form-item>

        <el-form-item label='分类banner：'
          prop='img_url'>
          <uploadImg flieName="img_url"
            class="icon_cate"
            :oldImgs="[cateForm.img_url]"
            :n="1"
            @getFile="getFile"></uploadImg>
          <p class='note_pic'>支持png、jpg格式照片，大小不能超过1M</p>
        </el-form-item>
        <el-form-item label="banner链接"
          prop="region">
          <el-select v-model="cateForm.region"
            placeholder="请选择活动区域"
            style="width:150px;"
            size='mini'>
            <el-option label="外部链接"
              value="0"></el-option>
            <el-option label="APP内页面"
              value="1"></el-option>
            <el-option label="商品详情"
              value="2"></el-option>
          </el-select>

          <el-input v-model='cateForm.link'
            style='width:250px;'
            size='mini'
            class="banner_input"
            placeholder='请输入banner链接'></el-input>
        </el-form-item>

        <el-form-item label="商品来源"
          prop="source">
          <el-select v-model="cateForm.source"
            placeholder="请选择商品来源"
            style="width:150px;"
            size='mini'>
            <el-option label="同步选品库"
              value="0"></el-option>
            <el-option label="同步物流ID"
              value="1"></el-option>
          </el-select>

          <el-input v-model='cateForm.sel_id'
            style='width:160px;'
            size='mini'
            class="banner_input"
            placeholder='请输入选品库Id'></el-input>
        </el-form-item>
      </el-form>

      <div class='align'>
        <el-button size='mini'
          @click='isShowAddCategory = false'>取消</el-button>
        <el-button size='mini'
          type='primary'
          @click='certainAddCategory'>确定</el-button>
      </div>
    </jdialog>
    <!--商品分类编辑-->

  </div>
</template>

<script>
// import uploadImg from "@/components/uploadImg";
export default {
  components: {
    // uploadImg
  },
  data () {
    return {
      form: {
        title: '',
        cate_id: '',
        page: 1,
        size: 20
      },
      tableData: [{ ID: '10001', title: '服装鞋子', relation_ID: '001002003', order: '3', status: 1 }, { ID: '10001', title: '服装鞋子', relation_ID: '001002003', order: '3', status: 0 }],
      total: 0,

      //新增商品展示分类
      isShowAddCategory: false,
      cateForm: {
        title: '',
        order: '',
        region: '',
        link: '',
        source: '',
        sel_id: ''
      },
      rules: {
        title: [
          { required: true, message: '请输入商品分类名称', trigger: 'blur' },
          { min: 1, max: 30, message: '长度在 1 到 30 个字符', trigger: 'blur' }],
        order: [{ required: true, message: '请输入商品分类排序', trigger: 'blur' }],
        display: [
          { required: true, message: '请选择展示排列', trigger: 'change' }
        ],
        img_url: [
          { required: true, message: '请上传分类banner图片', trigger: 'blur' }
        ],
        region: [
          { required: true, message: '请选择banner链接', trigger: 'change' }
        ],
        source: [{
          required: true, message: '请选择商品来源', trigger: 'change'
        }],
      },
    }
  },
  mounted () {

  },
  methods: {

    //新增分类
    addJDCPSCate () {
      this.isShowAddCategory = true
    },
    //搜索
    searchJDCate () {

    },
    //查看分类
    watchJDCateDetail (id) {
      console.log(id)
      this.isShowAddCategory = true
    },
    //跳转销售日志
    gotoSaleDaily (id) {
      this.$router.push({
        path: './saledaily',
        query: { cid: id }
      })
    },
    //同步商品
    syncWoods (id) {
      console.log(id)
    },
    //删除
    deleteJDCPSCate (id) {
      this.$confirm('确定删除该分类？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      }).then(() => {
        console.log(id)
      }).catch(() => {
        console.log('cancel')
      });
    },
    //更改分类状态
    isUseActivityChange (id, e) {
      //更新成功后重新获取商品
      console.log(id, e)
    },
    //分页
    pageChange (page) {
      this.form.page = page
      //获取更多数据

    },
   //根据点击查看还是新增，新增分类
    certainAddCategory(){
       this.isShowAddCategory = false
    },
    getFile (file) {
      this.cateForm[file.name] = file.files.length > 0 ? file.files[0].url : "";
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  }
}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .top {
    margin-bottom: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 150px;
    }
  }

  .pagination {
    float: right;
    margin-top: 12px;
  }
  .demo-ruleForm {
    padding: 20px;
  }

  .icon_cate {
    float: left;
  }
  .note,
  .note_pic {
    color: #666666;
    font-size: 12px;
    margin-left: 12px;
  }
  .note_pic {
    margin-top: 28px;
  }
  .banner_input {
    margin-left: 12px;
  }
  .align{
    text-align: center;
  }
}
</style>